<template>
  <div class="login">
    <div class="login-bg">
    </div>
    <!--    <el-row type="flex" align="middle" class="logo">
          <i class="el-icon-s-finance icon"></i>
          <span class="name">XXX管理系统</span>
        </el-row>-->
    <el-row align="middle" class="container">
      <el-card class="box-card login-box">
        <div slot="header" class="clearfix">
          <h1 style="text-align: center">SLASH管理系统</h1>
        </div>
        <el-form label-position="right" label-width="80px" :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item label="登录账号" prop="account">
            <el-input v-model="loginForm.account" type="text" autocomplete="off" @blur="onAccountInputBlur"
                      placeholder="请输入登录账号"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="loginForm.password" type="password" autocomplete="off"
                      v-on:keyup.enter.native="onKeyDownEvent" placeholder="请输入登录密码"></el-input>
          </el-form-item>
          <el-form-item class="verification-code-box" label="验证码" prop="verificationCode">
            <el-input v-model="loginForm.verificationCode" type="text" autocomplete="off"
                      v-on:keyup.enter.native="onKeyDownEvent"
                      placeholder="请输入验证码"></el-input>
            <div class="verification-code-img" @click="onVerificationCodeEvent" v-loading="verificationCodeImgLoading">
              <img :src="verificationCodeImgSrc">
            </div>
          </el-form-item>
          <el-button style="width: 100%" type="primary" @click="onLoginBtnEvent()" :loading="logging">
            {{ loginBtnLabel }}
          </el-button>
          <div class="mt-10">
            <p class="mt-10" style="text-align: center;color: red">演示环境请勿删除修改数据</p>
            <p class="mt-10" style="text-align: center;">如果账号老是被挤出自己新建一个账户</p>
          </div>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import loginApi from '@/apis/loginApi.js'

export default {
  data () {
    return {
      loginBtnLabel: '立 即 登 录',//登录按钮
      logging: false,//登录状态
      verificationCodeImgLoading: false,//验证码加载效果
      verificationCodeImgSrc: '',//验证码路径
      verificationCodeUid: '',
      loginForm: {
        account: '',//登录账号
        password: '',//登录密码
        verificationCode: ''//验证码
      },
      rules: {
        account: [
          {required: true, message: '请输入登录账号', trigger: 'blur'},
        ], password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
        ],
        verificationCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, max: 6, message: '请输入正确的验证码', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
  },
  methods: {
    onKeyDownEvent (e) {

      this.doLogin()

    },
    /**
     * 登录事件
     */
    onLoginBtnEvent () {
      this.doLogin()
    },
    /**
     *登录输入框失去焦点事件
     * */
    onAccountInputBlur () {
      this.doRefreshVerificationCode()
    },
    /**
     * 刷新验证码事件
     */
    onVerificationCodeEvent () {
      this.doRefreshVerificationCode()
    },
    /**
     * 验证码刷新业务处理
     */
    doRefreshVerificationCode () {
      if (this.loginForm.account == '') {
        return
      }
      this.verificationCodeImgLoading = true
      loginApi.selectVerificationCode(this.loginForm.account).then((msg) => {
        setTimeout(() => {
          this.verificationCodeImgSrc = msg.row.img
          this.verificationCodeUid = msg.row.uid
          this.verificationCodeImgLoading = false

        }, 200)
      }).catch((msg) => {
        this.verificationCodeImgLoading = false
      })
    },
    doLogin () {
      this.$refs['loginForm'].validate(valid => {
        if (!valid) {
          return
        }
        this.loginBtnLabel = '正 在 登 录 中'
        this.logging = true
        let data = this.cloneDeep(this.loginForm)
        data.password = this.$md5(data.password)
        loginApi.loginAccount(data).then((msg) => {
          let data = msg.data
          loginApi.setToken(data.token)
          this.$router.push({path: '/pages/home/welcome'})
        }).catch((msg) => {
          this.logging = false
          this.loginBtnLabel = '立 即 登 录'
          console.log(msg)
        }).finally(() => {
          this.doRefreshVerificationCode()
        })
      })
    }
  },
  watch: {},
}
</script>

<style lang="less" scoped>

.login {
  overflow: hidden;

  .login-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    transform: scale(1.2);
    background: url(../../assets/images/bg.jpg) no-repeat;
    @blur: 10px;
    -webkit-filter: blur(@blur); /* Chrome, Opera */
    -moz-filter: blur(@blur);
    -ms-filter: blur(@blur);
    filter: blur(@blur);

    &:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0px;
      left: 0px;
      z-index: 0;
    }
  }

  .container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .login-box {
      verticle-align: middle;
      margin: 200px auto;
      max-width: 400px;
      z-index: 9999;

      .el-form-item {
        width: 100%;
      }

      .verification-code-box {
        .el-input {
          display: inline-block;
          width: 50%;

        }

        .verification-code-img {
          width: 45%;
          display: inline-block;;
          padding: 0px;
          height: 35px;
          float: right;

          img {
            width: 100%;
            height: 100%;
          }
        }

      }
    }
  }

}

</style>
